<template>
    <div class="systemUser">
        <el-button type="primary" class="btn" @click="addUser">新增用户</el-button>
        <system-usertable @dialogState="dialogState" @search="search" :loading="loading" :data="data"/>
        <system-useradd v-if="state" @search="search" :type="type" :id="id" @dialogState="dialogState"/>
    </div>
</template>
<script>
import SystemUsertable from "./controls/systemUsertable";
import SystemUseradd from "./controls/systemUseradd";
import queryString from "querystring";
import { RoleChange } from "utils/formData";
export default {
  name: "systemUser",
  data() {
    return {
      type:'',
      id:'',
      data:[],
      loading: false,
      state: false
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      //搜索
      this.loading = true;
      const tableParams = {
        size: 20,
        page: this.currentPage - 1
      };
      let params = this.lodash.assign({}, tableParams);
      const param = queryString.stringify(params || {});
      this.api.get(`/user?${param}`)
        .then(res => {
          this.loading = false;
          if (!res.data) return;
          this.data = res.data;
          this.dataInit();
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data);
        });
    },
    dataInit() {
      //数据初始化
      this.data.map((item) => {
        let roles = RoleChange(item.state);
        item.stateName = roles[0].name;
        return item;
      })
    },
    dialogState(data) {
      data = data || {};
      this.state = data.state;
      this.type = data.type;
      this.id = data.id;
    },
    addUser() {
      var data = {
        type:'new',
        state: true
      }
      this.dialogState(data);
    }
  },
  components: {
    SystemUsertable,
    SystemUseradd
  },
  watch: {
    currentPage() {
      this.search();
    }
  }
};
</script>
<style lang="less" scoped>
.systemUser {
  .btn {
    margin-left: 20px;
  }
}
</style>
